﻿@model ScheduleDeliveryModel
@using Logistics.Web.Models.Shipment;
<link href="//code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet" />
<div class="schedule-delivery">
    <h1>Schedule Delivery</h1>
    <p>Please pick an available date from the calendar.</p>
    @using (Html.BeginForm())
    {
        @Html.HiddenFor(model => model.PackageId)
        <div id="schedule-delivery-wrapper">
            <div id="schedule-delivery-calendar">
                <table class="delivery-calendar">
                    <thead>
                        <tr>
                            @foreach (var date in Model.AvaliableDates)
                            {
                                <th>@date.Text</th>
                            }
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            @foreach (var date in Model.AvaliableDates)
                            {
                                <td><div class="available schedule-date-block" data-name="@Html.NameFor(model => model.ScheduledDate)" data-value="@date.Value"></div></td>
                            }
                        </tr>
                    </tbody>
                </table>
            </div>
            @if (Model.CanSetSignatureRequirement)
            {
                @Html.HiddenFor(model => model.CanSetSignatureRequirement)
                @Html.CheckBoxFor(model => model.IsSignatureRequired)
                @Html.LabelFor(model => model.IsSignatureRequired)
            }
            <input type="button" data-action="submit" data-name="submitted" data-value="true" value="@T("Logistics.Tracking.ScheduleDelivery")" />
            <div class="clear"></div>
        </div>
    }
    <script type="text/javascript">
        $(".schedule-date-block").live("click", function () {
            $("#scheduled-date").remove();
            $(".schedule-date-block").removeClass("selected");
            $(this).closest("form").append("<input type='hidden' id='scheduled-date' name='" + $(this).attr("data-name") + "' value='" + $(this).attr("data-value") + "' />");
            $(this).addClass("selected");
        });
    </script>
</div>
